<script setup>
import {ref, defineProps} from "vue";

const props = defineProps({
  dataList: {
    type: Array,
    default: []
  },
  height: {
    type: String,
    default: 'auto'
  }
})
const emit = defineEmits(['rowHandle'])

const activeName = ref('')

const rowHandle = (row) =>{
  activeName.value = row.stockCode
  emit('rowHandle', row)
}
</script>

<template>
<div class="c-table">
  <div class="row header">
    <div>股票名</div>
    <div>最新价</div>
    <div>涨跌比</div>
    <div>操作</div>
    <slot name="header"></slot>
  </div>
  <div class="table-body" :style="{height}">
    <template v-for="item in dataList">
      <div :class="['row', {active: activeName === item.stockCode},{error: item.ratio > 0, success: item.ratio < 0}]" @click="rowHandle(item)">
        <div :title="item.stockCode">{{item.stockName}}</div>
        <div>{{item.price}}</div>
        <div>{{item.ratio}}%</div>
        <div>
          <slot :row="item"></slot>
        </div>
        <slot name="body" :row="item"></slot>
      </div>
    </template>
  </div>
</div>
</template>

<style scoped lang="scss">
.c-table{
  position: relative;
  .table-body{
    overflow: auto;
  }
  .row{
    display: flex;
    align-items: center;
    height: 4vh;
    line-height: 4vh;
    >div{
      flex: 1;
      text-align: center;
      &:hover{
        color: yellow !important;
        :deep(.c-text){
          color: yellow !important;
        }
      }
    }
    &.header{
      background-color: #df1212;
      color: #FFFFFF;
      margin-bottom: 1vh;
    }
    &:hover,&.active{
      background-color: #cb2020;
      cursor: pointer;
      color: #FFFFFF;
      :deep(.c-text){
        color: #FFFFFF;
      }
    }
  }
}
</style>
